<template>
  <div id="app">
    <!-- :person="person" 传到组件里,组件中接收
    props:[传过去的属性(属性名是字符串格式)]  
    :person="person"这种书写方式传过去接收只能接收person,无法直接解构赋值
    可以通过v-bind="person的方式批量传递props"
     -->
    <!-- <Header :person="person" v-bind="{a:1,b:2}" /> -->
    <!-- 
      v-bind="{a:1,b:2}"  在解析时会解析成 :a=1 :b=2
      同理,当person是个对象  v-bind="person"  解析时也会把键值对通过这种方式解析,这样在组件实例中接收时,props中接收的就是里面的键
 -->
 <!-- 
    props传到组件后不建议修改props的值,如果是基本数据类型,eslint会报错,vue也会报警告
    如果props是对象,修改对象内的值,不会报错,但是不推荐
  -->
    <Header v-bind="person" />

    <h1>这个count每次加2</h1>
    <MyCount :num="2" />
    <button>点击获取Header组件上的ref</button>
    <h1>这个count每次加3</h1>
    <MyCount :num="3" />
  </div>
</template>

<script>
import Header from "./components/Header";
import MyCount from "./components/MyCount";

export default {
  name: "App",
  components: {
    Header,
    MyCount,
  },
  data() {
    return {
      person: {
        name: "zhangs",
        age: 18,
        sex: "男",
      },
    };
  },
};
</script>

<style>
</style>
